<template>
  <div>
    <!-- 分组 -->
    <div class="flex_y_center" style="margin: 15px 0">
      <div style="width: 30%; text-align: right">分组：</div>
      <div>{{ methodName }}</div>
    </div>
    <!-- 类别名称 -->
    <div class="flex_y_center" style="margin: 15px 0">
      <div style="width: 30%; text-align: right">
        <span style="color: red">*</span>
        类别名称：
      </div>
      <el-input
        v-model="cateFrom.type_name"
        placeholder="请输入类别名称"
        style="width: 40%"
      />
    </div>
    <div class="flex_between">
      <div></div>
      <el-button type="primary" @click="addMethod">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { methodTypeAdd } from '@/api/commodityType'
  import { mapState } from 'vuex'

  export default {
    props: {
      oMethodId: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        cateFrom: {
          id: '',
          method_id: '',
          type_name: '',
        },
      }
    },
    computed: {
      ...mapState({
        methodName: (state) => state.goods.methodName,
      }),
    },
    methods: {
      // 添加
      addMethod() {
        if (!this.cateFrom.type_name) this.$message.error('请输入类型名称')
        else {
          if (this.oMethodId) this.cateFrom.method_id = this.oMethodId
          methodTypeAdd(this.cateFrom).then(() => {
            this.$emit('send')
          })
        }
      },
    },
  }
</script>

<style scoped>
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
</style>
